import { defineStore } from "pinia";
import { store } from "@/store";
import { v4 } from "uuid";
import { TextComponentProps } from "@/components/defaultProps";

export interface EditorProps {
  // 借中间编辑器渲染的数组
  components: ComponentData[];
  // 当前编辑的是哪个元素，uuid
  currentElement: string;
}

export interface ComponentData {
  // 这个元素的属性
  props: Partial<TextComponentProps>;
  // uuid
  id: string;
  // 业务组件库名称
  name: string;
}

export const testComponents: ComponentData[] = [
  {
    id: v4(),
    name: "p-text",
    props: { text: "hello", fontSize: "20px" },
  },
  {
    id: v4(),
    name: "p-text",
    props: { text: "hello2", color: "red" },
  },
  {
    id: v4(),
    name: "p-text",
    props: { text: "hello3", actionType: "url", url: "https://www.baidu.com" },
  },
];
export const useEditorStore = defineStore("editor", {
  state: (): EditorProps => ({
    components: testComponents,
    currentElement: "",
  }),

  getters: {
    //
    getCurrentElement(): ComponentData | undefined {
      return this.components.find(
        (component) => component.id === this.currentElement
      );
    },
  },
  actions: {
    //
    addComponent(props: Partial<TextComponentProps>) {
      const newComponent: ComponentData = {
        props,
        name: "PText",
        id: v4(),
      };
      this.components.push(newComponent);
    },

    setActive(currentId: string) {
      this.currentElement = currentId;
    },
  },
  persist: false,
});

export const useEditorStoreWithOut = () => {
  return useEditorStore(store);
};
